// 组件路由写法
import Home from '../views/home'
// import About from '../views/about'
import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
// 路由懒加载
const About = lazy(() => import('../views/about'))
const Page1 = lazy(() => import('../views/page1'))
const Page2 = lazy(() => import('../views/page2'))
const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>loading...</div>}>
        {comp}
    </React.Suspense>
)
const Routes = [
    {
        path: '/',
        // 路由重定向 Navigate 重定向
        element: <Navigate to="/page1"></Navigate>
    },
    {
        path: '/',
        element: <Home/>,
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1/>)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2/>)
            },
        ]
    }
    // {
    //   path: '/home',
    //   element: <Home/>
    // },
    // {
    //   path: '/about',
    //   element: withLoadingComponent(<About/>)

    // },
]
export default Routes